<template>
    <div class="fxkh-wrapper">
        <el-col :span="4">
            <ul class="fxkh-btns">
                <li class="selected">实时雨情</li>
                <!-- <li>长江水位</li> -->
                <li>水库水情</li> 
                <li>河道水情</li>
                <li>天气预报</li>
                <li>防汛调度</li>
            </ul>
        </el-col>
        <el-col v-show="!fxkhTab && !fxddTab" :span="20">
            <el-col :span="spanNum">
                <div class="fxkh-content">
                    <ul class="weather-tab">
                        <li value="weather1d" class="selected">今天</li>
                        <li value="weather">7天</li>
                        <li value="weather15d">8-15天</li>
                        <li value="radar">雷达图</li>
                        <li value="satellite">卫星图</li>
                    </ul>
                    <div v-show="!cityState" :class="coverImgDiv" style="position:absolute;background-color:transparent;left:60px;top:80px;"></div>
                    <div v-show="!cityState" style="position:absolute;height:30px;width:260px;float:right;background-color:#f9f9f9;right:40px;top:40px;z-index:1003"></div>
                    <div v-show="!cityState" :class="coverTabDiv" style="position:absolute;height:30px;width:160px;float:right;background-color:#f9f9f9;right:40px;z-index:1003">
                        <div class="zoom" @click="enlargeWindow">
                        放大
                        </div>
                    </div>
                    <div :class="boxsize" style="overflow:hidden;border:0px"> 
                        <div :class="boxmargin" style="width:1200px;height:1200px;"> 
                            <iframe id='weatherIframe' :src='weatherReportUrl' width="1200" height="1280" scrolling="no"></iframe> 
                        </div> 
                    </div> 
                </div>
            </el-col>
            <el-col :span="4" v-show="cityState">
                <ul class="fxkh-citys">
                    <li class="selected">黄州区</li>
                    <li>麻城市</li>
                    <li>武穴市</li>
                    <li>团风县</li>
                    <li>浠水县</li>
                    <li>罗田县</li>
                    <li>英山县</li>
                    <li>蕲春县</li>
                    <li>黄梅县</li>
                    <li>红安县</li>
                </ul>
            </el-col>
        </el-col>
        <el-col v-show="fxddTab" :span="20">
          <iframe style="width: 100%;height: 700px" src="/door/uploadfiles/null1511251044.pdf"></iframe>
        </el-col>
        <el-col v-show="fxkhTab" :span="20">
            <el-row style="margin:12px;">
              <el-col :span="6" :offset="15">
                  <!-- <el-input
                    placeholder="搜索"
                    suffix-icon="el-icon-search"
                    v-model="keywords">
                  </el-input> -->

                  <el-date-picker
                    v-model="keywords"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
              </el-col>
            </el-row> 

            <el-table
              v-if="this.tabText=='实时雨情'"
              :data="tableData1"
              border
              stripe
              style="width: 100%"
               v-loading="tLoading" element-loading-text="加载中...">
              <el-table-column
                prop="xsnm"
                label="县市区名">
              </el-table-column>
              <el-table-column
                prop="stcd"
                label="测站编码">
              </el-table-column>
              <el-table-column
                prop="stnm"
                label="测站名称">
              </el-table-column>
              <el-table-column
                prop="xznm"
                label="乡镇名">
              </el-table-column>
              <el-table-column
                prop="tm"
                label="测量时间">
              </el-table-column>
              <el-table-column
                prop="drp"
                label="实时雨量">
              </el-table-column>
              <el-table-column
                  fixed="right"
                  :label="columnName"
                  width="120">
                  <template slot-scope="scope">
                    <div v-if="tabText=='实时雨情'">
                      {{formatter(scope.row)}}
                    </div>
                  </template>
                </el-table-column>
            </el-table>
            <el-table v-else :data="tableData" border stripe style="width: 100%" v-loading="tLoading" element-loading-text="加载中...">
                <el-table-column
                    v-for="(col,index) in cols" :key="index"
                    :prop="col.prop" :label="col.label" >
                </el-table-column>
                <el-table-column
                  fixed="right"
                  :label="columnName"
                  width="120">
                  <template slot-scope="scope">
                    <div v-if="tabText=='实时雨情'">
                      {{formatter(scope.row)}}
                    </div>
                    <div v-else>
                      <i :class="formatter(scope.row)"></i>
                    </div>
                  </template>
                </el-table-column>
            </el-table>
            <div class="clear-float"></div>
            <div class="page-wrapper">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" @size-change="changeSize" @current-change="pageChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 20, 30, 40]" :total="total"></el-pagination>
            </div>
        </el-col>
        
        <div style="clear:both;"></div>
    </div>
</template>

<script>
import tableCols from "../../jsons/fxkhData.json";

export default {
  name: "fxkh",
  data: function() {
    return {
      loading: true,
      tLoading:true,
      currentPage:1,
      pageSize:10,
      total:0,
      tabText:'实时雨情',
      columnName:'',
      keywords:'',
      fxkhTab: true,
      fxddTab: false,
      spanNum: 20,
      cityState: true,
      boxsize: "box-weather-small", //窗口大小
      boxmargin: "box-margin-small",
      coverImgDiv: "cover-img-small",
      coverTabDiv: "cover-tab-small",
      weatherReportUrl: "",
      city: "黄州区",
      weatherStr: "weather1d",
      cityList: {
        黄州区: "101200511",
        麻城市: "101200503",
        武穴市: "101200509",
        团风县: "101200510",
        浠水县: "101200506",
        罗田县: "101200504",
        英山县: "101200505",
        蕲春县: "101200507",
        黄梅县: "101200508",
        红安县: "101200502"
      },
      cols: [],
      tableData: [],
      tableData1: []
    };
  },
  methods: {
    changeSize(val) {
        this.pageSize = val;
        this.initeTable(this.tabText)
    },
    pageChange(val){
        this.currentPage = val;
        this.initeTable(this.tabText)
    },
    getWeatherReportUrl(cityStr, dateStr) {
      var _url = "http://www.weather.com.cn/";
      if (dateStr == "" || dateStr == undefined)
        _url += this.weatherStr + "/" + this.cityList[cityStr] + ".shtml";
      else if (dateStr == "radar") {
        //雷达图
        this.cityState = false;
        this.spanNum = 24;
        this.boxsize = "box-weather-more";
        this.boxmargin = "box-margin-more";
        this.coverImgDiv = "cover-img-big";
        this.coverTabDiv = "cover-tab-big";
        _url = "http://www.nmc.cn/publish/radar/huazhong.html";
      } else if (dateStr == "satellite") {
        this.cityState = false;
        this.spanNum = 24;
        this.boxsize = "box-weather-big";
        this.boxmargin = "box-margin-big";
        this.coverImgDiv = "cover-img-small";
        this.coverTabDiv = "cover-tab-small";
        _url = "http://www.nmc.cn/publish/satellite/fy2.htm";
      } else {
        this.weatherStr = dateStr;
        this.cityState = true;
        this.spanNum = 20;
        this.boxmargin = "box-margin-small";
        if (dateStr == "weather15d") {
          this.boxsize = "box-weather-mid";
        } else this.boxsize = "box-weather-small";
        _url += dateStr + "/" + this.cityList[cityStr] + ".shtml";
      }

      console.log("新地址为：" + _url);
      this.weatherReportUrl = _url;
      // return _url;
    },
    initLeftBtns() {
      var lis = document.getElementsByClassName("fxkh-btns")[0].children;
      let domObj = this;
      for (var index = 0; index < lis.length; index++) {
        lis[index].onclick = function() {
          var _ul = domObj.$el.getElementsByClassName("fxkh-btns")[0];
          _ul.getElementsByClassName("selected")[0].removeAttribute("class");
          this.setAttribute("class", "selected");
          if (this.textContent == "天气预报") {domObj.fxddTab = false; domObj.fxkhTab = false;}
          else if(this.textContent == "防汛调度") {domObj.fxddTab = true; domObj.fxkhTab = false}
          else {
            domObj.fxkhTab = true;
            domObj.fxddTab = false;
            domObj.tabText=this.textContent;
            domObj.keywords="";
            domObj.currentPage=1;
            domObj.pageSize=10;
            domObj.initeTable(this.textContent);
          }
        };
      }
    },
    initRightBtns() {
      var lis = document.getElementsByClassName("fxkh-citys")[0].children;
      let domObj = this;
      for (var index = 0; index < lis.length; index++) {
        lis[index].onclick = function() {
          domObj.loading = true;
          var _ul = domObj.$el.getElementsByClassName("fxkh-citys")[0];
          _ul.getElementsByClassName("selected")[0].removeAttribute("class");
          this.setAttribute("class", "selected");
          domObj.city = this.textContent;
          domObj.getWeatherReportUrl(this.textContent);
        };
      }
    },
    initTabBtns() {
      var lis = document.getElementsByClassName("weather-tab")[0].children;
      let domObj = this;
      for (var index = 0; index < lis.length; index++) {
        lis[index].onclick = function() {
          domObj.loading = true;
          var _ul = domObj.$el.getElementsByClassName("weather-tab")[0];
          _ul.getElementsByClassName("selected")[0].removeAttribute("class");
          this.setAttribute("class", "selected");
          domObj.getWeatherReportUrl(domObj.city, this.getAttribute("value"));
        };
      }
    },
    enlargeWindow() {
      if (this.coverImgDiv == "cover-img-small") {
        this.$store.commit("TOGGLE_WEATHER_SHOW", "1");
      } else {
        this.$store.commit("TOGGLE_WEATHER_SHOW", "2");
      }
    },
    initeTable(text) {
      var _this=this;
      var askUrl='';
      var askData=[];
      if (text == "实时雨情") {
        this.columnName='天气情况'
          _this.tLoading=true;
        console.log(tableCols.rainStation);
        this.cols = tableCols.rainStation;
        if(this.keywords==''||this.keywords==null){
          askUrl="GET_TODAY_RAIN_";
          askData=[this.pageSize,this.currentPage]
        }else{
          askUrl="GET_TODAY_RAIN";
          askData=[this.pageSize,this.currentPage,this.keywords]
          console.log(this.keywords);
        }
        this.$$http(askUrl,askData).then(data => {
          // debugger;
          console.log(data)
          _this.tableData1 = data.rows;
          _this.total=parseInt(data.total);
          _this.tLoading=false;
          for(var i=0;i<_this.total;i++){
            // debugger;
            _this.tableData1[i].xsnm = data.rows[i].stlc.substring(0,3);
            _this.tableData1[i].xznm = data.rows[i].stlc.substring(3);
          }
          // console.log(_this.tableData1);
        });
      } else if (text == "长江水位") {
        this.columnName='涨跌情况'
          _this.tLoading=true;
        this.cols = tableCols.CJStation;
        this.$$http("GET_TODAY_RAIN").then(data => {
          // console.log(data)
          _this.tLoading=false;
        });
      } else if (text == "水库水情") {
        this.columnName='涨跌情况'
          _this.tLoading=true;
        this.cols = tableCols.reservoirStation;
        if(this.keywords==''||this.keywords==null){
          askUrl="GET_TODAY_RESERVOIR_";
          askData=[this.pageSize,this.currentPage]
        }else{
          askUrl="GET_TODAY_RESERVOIR";
          askData=[this.pageSize,this.currentPage,this.keywords]
        }
        this.$$http(askUrl,askData).then(data => {
          // console.log(data)
          _this.tableData = data.rows;
          _this.total=parseInt(data.total);
          _this.tLoading=false;
        });
      } else if (text == "河道水情") {
        this.columnName='涨跌情况'
          _this.tLoading=true;
        this.cols = tableCols.riverStation;
        if(this.keywords==''||this.keywords==null){
          askUrl="GET_TODAY_RIVER_";
          askData=[this.pageSize,this.currentPage]
        }else{
          askUrl="GET_TODAY_RIVER";
          askData=[this.pageSize,this.currentPage,this.keywords]
        }
        this.$$http(askUrl,askData).then(data => {
          // console.log(data)
          _this.tableData = data.rows;
          _this.total=parseInt(data.total);
          _this.tLoading=false;
        });
      }
    },
    formatter(row){
      // console.log(row)
      if(this.tabText=='实时雨情'){
        switch (row.wth) {
          case '5':
            return '雪'
            break;
          case '6':
            return '雨夹雪'
            break;
          case '7':
            return '雨'
            break;
          case '8':
            return '阴'
            break;
          case '9':
            return '晴'
            break;
          default:
            break;
        }
      }
      else if(this.tabText=='长江水位'){
        
      }
      else if(this.tabText=='水库水情'){
        switch (row.rwptn) {
          case '4':
            return 'fa fa-arrow-down'
            break;
          case '5':
            return 'fa fa-arrow-up'
            break;
          case '6':
            return 'fa fa-arrows-h'
            break;
          default:
            break;
        }
      }
      else if(this.tabText=='河道水情'){
        switch (row.wptn) {
          case '4':
            return 'fa fa-arrow-down'
            break;
          case '5':
            return 'fa fa-arrow-up'
            break;
          case '6':
            return 'fa fa-arrows-h'
            break;
          default:
            break;
        }
      }
    }
  },
  watch:{
    keywords:function(val){
      console.log(this.keywords)
      var _this=this;
      this.initeTable(this.tabText)
    }
  },
  mounted() {
    this.initeTable("实时雨情")
      //初始化链接
    this.getWeatherReportUrl("黄州区");
    
    //初始化左侧菜单
    this.initLeftBtns();
    //初始化右侧菜单
    this.initRightBtns();
    //初始化天气预报菜单
    this.initTabBtns();
    //判断iframe加载进度
    var iframe = document.getElementById("weatherIframe");

    var _this = this;
    // if (iframe.attachEvent) {
    //   iframe.attachEvent("onload", function() {
    //     _this.loading = false;
    //   });
    // } else {
    //   iframe.onload = function() {
    //     _this.loading = false;
    //   };
    // }
  }
};
</script>

<style lang="scss">
.fxkh-wrapper {
  height: 100%;
  // padding: 8px;
  .fxkh-btns {
    margin-top: 35px;
    text-align: center;
    li {
      width: 128px;
      margin: 0 auto;
      margin-bottom: 15px;
      height: 45px;
      line-height: 46px;
      background: #f1f1f1;
      text-align: center;
      display: block;
      a:hover {
        background-color: #2873a6;
      }
    }
    li:hover,
    li.selected {
      cursor: pointer;
      color: #fff;
      background-color: #2873a6;
    }
  }
  .fxkh-citys {
    margin-top: 35px;
    text-align: center;
    li {
      width: 108px;
      margin: 0 auto;
      margin-bottom: 12px;
      height: 30px;
      line-height: 30px;
      background: #f1f1f1;
      text-align: center;
      display: block;
      a:hover {
        background-color: #2873a6;
      }
    }
    li:hover,
    li.selected {
      cursor: pointer;
      color: #fff;
      background-color: #2873a6;
    }
  }
  .fxkh-content {
    margin-top: 15px;
    position: relative;
    .weather-tab {
      margin-left: 42px;
      li {
        float: left;
        // margin-left: 43px;
        background: #d0ebff;
        color: #252525;
        cursor: pointer;
        height: 32px;
        line-height: 32px;
        margin-right: 2px;
        text-align: center;
        width: 134px;
        position: relative;
      }
      li:hover,
      li.selected {
        cursor: pointer;
        background-color: #ecf7ff;
      }
    }
    .zoom {
      right: 100px;
      background: url(/src/assets/img/zoom.png) no-repeat left center;
      padding-left: 20px;
      font-size: 15px;
      line-height: 32px;
      margin-left: 25px;
      cursor: pointer;
    }
  }
}

.box-weather-small {
  width: 700px;
  height: 600px;
  margin-left: 42px;
}
.box-weather-mid {
  width: 700px;
  height: 460px;
  margin-left: 42px;
}
.box-weather-big {
  width: 1000px;
  height: 800px;
  margin-left: 12px;
}
.box-weather-more {
  width: 1000px;
  height: 900px;
  margin-left: 12px;
}
.box-margin-small {
  margin-top: -275px;
  margin-left: -100px;
}
.box-margin-big {
  margin-top: -225px;
  margin-left: -250px;
}
.box-margin-more {
  margin-top: -265px;
  margin-left: -250px;
}
.el-loading-mask {
  opacity: 0.5;
}
.cover-img-small {
  height: 620px;
  width: 855px;
}
.cover-img-big {
  height: 660px;
  width: 855px;
}
.cover-tab-small {
  bottom: 100px;
}
.cover-tab-big {
  bottom: 153px;
}
.page-wrapper{
    text-align: right;
    padding: 10px 0;
}
.grid-content {
    border-radius: 4px;
    min-height: 36px;
    background-color: gray;
  }

i.fa-arrow-up{
  color:#f00;
}
i.fa-arrow-down{
  color:green;
}
</style>